<script setup>
import { ref, onMounted, computed } from 'vue'
import { useUserStore , useMealStore} from '@/stores'

const userStore = useUserStore()
const mealStore = useMealStore()

// 计算BMI
const calculateBMI = (weight, height) => {
  if (!weight || !height) return '0.0'
  height /= 100
  const bmi = weight / (height * height)
  return bmi.toFixed(1)
}

//计算目标热量
const targetHeat = computed(() => {
  if(userStore.userInfo.sex === 1){
    return ((10*userStore.userInfo.weight + 6.25*userStore.userInfo.height - 5*userStore.userInfo.age + 5)*1.4).toFixed(0)
  }else{
    return ((10*userStore.userInfo.weight + 6.25*userStore.userInfo.height - 5*userStore.userInfo.age - 161)*1.4).toFixed(0)
  }
})

// 响应式BMI值
const bmi = computed(() => {
  return calculateBMI(userStore.userInfo?.weight || 0, userStore.userInfo?.height || 0)
})

// 健康数据目标值
const healthTargets = ref({
  targetHeat: targetHeat, // 每日目标热量
  targetWater: 2000 // 每日目标饮水量
})

// 健康建议
const healthTips = ref([
  {
    id: 1,
    icon: 'icon-shuimian',
    title: '保证充足睡眠',
    content: '建议每天睡眠7-9小时，有助于身体恢复',
    type: 'sleep',
    color: '#9C88FF'
  },
  {
    id: 2,
    icon: 'icon-paobu',
    title: '适量运动',
    content: '每天至少30分钟中等强度运动',
    type: 'exercise',
    color: '#FF6B9D'
  },
  {
    id: 3,
    icon: 'icon-shui',
    title: '多喝水',
    content: '每天至少8杯水，促进新陈代谢',
    type: 'water',
    color: '#4ECDC4'
  },
  {
    id: 4,
    icon: 'icon-caipin',
    title: '均衡饮食',
    content: '合理搭配蛋白质、碳水化合物和维生素',
    type: 'nutrition',
    color: '#45B7D1'
  }
])

// 弹窗相关
const showActionModal = ref(false) // 主添加弹窗
const showMealModal = ref(false)   // 添加饮食弹窗
const showWaterModal = ref(false)  // 添加饮水弹窗

// 表单数据
const mealForm = ref({
  name: '',
  type: 'breakfast',
  heat: 0,
  image: ''
})

const waterAmount = ref(200) // 默认饮水量

// 打开主添加弹窗
const openActionModal = () => {
  showActionModal.value = true
}

// 关闭所有弹窗
const closeAllModals = () => {
  showActionModal.value = false
  showMealModal.value = false
  showWaterModal.value = false
}

// 打开添加饮食弹窗
const openMealModal = () => {
  // 重置表单
  mealForm.value = {
    name: '',
    type: 'breakfast',
    heat: 0,
    image: ''
  }
  showActionModal.value = false
  showMealModal.value = true
}

// 打开添加饮水弹窗
const openWaterModal = () => {
  waterAmount.value = 200 // 重置为默认值
  showActionModal.value = false
  showWaterModal.value = true
}

// 提交饮食表单
const submitMealForm = () => {
  if (!mealForm.value.name || mealForm.value.heat <= 0) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  // 添加到存储
  mealStore.addMeal({
    ...mealForm.value,
    // 如果没有提供图片，使用默认图片
    image: mealForm.value.image || `/static/images/default-food-${Math.floor(Math.random() * 3) + 1}.png`
  })
  
  // 关闭弹窗
  showMealModal.value = false
  
  // 显示成功提示
  uni.showToast({
    title: '饮食记录添加成功',
    icon: 'success'
  })
}

// 提交饮水记录
const submitWaterRecord = () => {
  if (waterAmount.value <= 0) {
    uni.showToast({
      title: '请输入有效的饮水量',
      icon: 'none'
    })
    return
  }
  
  // 添加到存储
  mealStore.addWater(waterAmount.value)
  
  // 关闭弹窗
  showWaterModal.value = false
  
  // 显示成功提示
  uni.showToast({
    title: '饮水记录添加成功',
    icon: 'success'
  })
}

// 删除饮食记录
const deleteMeal = (mealId) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条饮食记录吗？',
    success: (res) => {
      if (res.confirm) {
        mealStore.removeMeal(mealId)
        uni.showToast({
          title: '已删除',
          icon: 'none'
        })
      }
    }
  })
}

// 删除饮水记录
const deleteWater = (recordId) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条饮水记录吗？',
    success: (res) => {
      if (res.confirm) {
        mealStore.removeWater(recordId)
        uni.showToast({
          title: '已删除',
          icon: 'none'
        })
      }
    }
  })
}

// 计算百分比
const getProgress = (current, target) => {
  return Math.min((current / target) * 100, 100)
}

// 计算完成度颜色
const getProgressColor = (progress) => {
  if (progress >= 80) return '#67C23A'
  if (progress >= 60) return '#E6A23C'
  return '#F56C6C'
}

// BMI状态
const getBMIStatus = (bmiValue) => {
  const bmiNum = parseFloat(bmiValue)
  if (bmiNum < 18.5) return '偏瘦'
  if (bmiNum < 24) return '正常'
  if (bmiNum < 28) return '偏重'
  return '肥胖'
}

// BMI状态颜色
const getBMIStatusColor = (bmiValue) => {
  const bmiNum = parseFloat(bmiValue)
  if (bmiNum < 18.5) return '#409EFF'
  if (bmiNum < 24) return '#67C23A'
  if (bmiNum < 28) return '#E6A23C'
  return '#F56C6C'
}

// 餐次类型映射
const mealTypeMap = {
  breakfast: { name: '早餐', icon: 'icon-zaocan', color: '#FFD93D' },
  lunch: { name: '午餐', icon: 'icon-wucan', color: '#FF6B9D' },
  dinner: { name: '晚餐', icon: 'icon-wancan', color: '#9C88FF' }
}

onMounted(() => {
  // 页面加载时获取数据
  console.log('页面加载完成')
})
</script>

<template>
  <view class="health-container">
    <!-- 页面头部 -->
    <view class="header-section">
      <view class="header-content">
        <view class="header-top">
          <view class="page-title">
            <text class="iconfont icon-navicon-jkhd"></text>
            饮食数据
          </view>
        </view>
        <view class="header-stats">
          <view class="user-info">
            <text class="weight-info">体重: {{ userStore.userInfo?.weight || '未设置' }}kg</text>
            <view class="bmi-info">
              <text class="bmi-value">BMI: {{ bmi }}</text>
              <text
                class="bmi-status"
                :style="{
                  color: getBMIStatusColor(bmi),
                  backgroundColor: getBMIStatusColor(bmi) + '15'
                }"
              >
                {{ getBMIStatus(bmi) }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 今日数据概览 -->
    <view class="overview-section">
      <view class="section-header">
        <text class="section-title">今日数据概览</text>
      </view>
      <view class="data-cards">
        <view class="data-card heat">
          <view class="card-icon">
            <text class="iconfont icon-reliang"></text>
          </view>
          <view class="card-content">
            <view class="card-value">{{ mealStore.todayTotalHeat }}kcal</view>
            <view class="card-label">热量(千卡)</view>
            <view class="progress-bar">
              <view
                class="progress-fill"
                :style="{
                  width: getProgress(mealStore.todayTotalHeat, healthTargets.targetHeat) + '%',
                  backgroundColor: getProgressColor(getProgress(mealStore.todayTotalHeat, healthTargets.targetHeat))
                }"
              ></view>
            </view>
            <view class="card-target">目标: {{ healthTargets.targetHeat }}千卡</view>
          </view>
        </view>
        <view class="data-card water">
          <view class="card-icon">
            <text class="iconfont icon-shui"></text>
          </view>
          <view class="card-content">
            <view class="card-value">{{ mealStore.todayTotalWater }}ml</view>
            <view class="card-label">饮水量</view>
            <view class="progress-bar">
              <view
                class="progress-fill"
                :style="{
                  width: getProgress(mealStore.todayTotalWater, healthTargets.targetWater) + '%',
                  backgroundColor: getProgressColor(getProgress(mealStore.todayTotalWater, healthTargets.targetWater))
                }"
              ></view>
            </view>
            <view class="card-target">目标: {{ healthTargets.targetWater }}ml</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 今日记录区域 -->
    <view class="records-section">
      <view class="section-header">
        <text class="section-title">今日记录</text>
        <view class="add-btn" @click="openActionModal">
          <text class="iconfont icon-jia"></text>
          添加记录
        </view>
      </view>

      <!-- 饮食记录 -->
      <view class="section-subheader">
        <text class="subheader-title">饮食记录</text>
      </view>
      
      <view class="meals-list" v-if="mealStore.todayMeals.length > 0">
        <view v-for="meal in mealStore.todayMeals" :key="meal.id" class="meal-item">
          <view class="meal-info">
            <view class="meal-header">
              <view class="meal-type">
                <text
                  class="iconfont"
                  :class="mealTypeMap[meal.type].icon"
                  :style="{ color: mealTypeMap[meal.type].color }"
                ></text>
                {{ mealTypeMap[meal.type].name }}
              </view>
              <view class="meal-time">{{ meal.time }}</view>
            </view>
            <view class="meal-name">{{ meal.name }}</view>
            <view class="meal-heat">{{ meal.heat }} 千卡</view>
          </view>
          <view class="meal-actions">
            <view class="delete-btn" @click.stop="deleteMeal(meal.id)">
              <text class="iconfont icon-shanchu1"></text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-state" v-if="mealStore.todayMeals.length === 0">
        <text class="empty-text">暂无饮食记录</text>
      </view>

      <!-- 饮水记录 -->
      <view class="section-subheader">
        <text class="subheader-title">饮水记录</text>
      </view>
      
      <view class="water-list" v-if="mealStore.todayWater.length > 0">
        <view v-for="record in mealStore.todayWater" :key="record.id" class="water-item">
          <view class="water-icon">
            <text class="iconfont icon-shui"></text>
          </view>
          <view class="water-info">
            <view class="water-time">{{ record.time }}</view>
            <view class="water-amount">{{ record.amount }} ml</view>
          </view>
          <view class="water-actions">
            <view class="delete-btn" @click.stop="deleteWater(record.id)">
              <text class="iconfont icon-shanchu1"></text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-state" v-if="mealStore.todayWater.length === 0">
        <text class="empty-text">暂无饮水记录</text>
      </view>
    </view>

    <!-- 温馨提示 -->
    <view class="tips-section">
      <view class="section-header">
        <text class="section-title">温馨提示</text>
      </view>
      <view class="tips-list">
        <view v-for="tip in healthTips" :key="tip.id" class="tip-item">
          <view class="tip-icon" :style="{ backgroundColor: tip.color }">
            <text class="iconfont" :class="tip.icon"></text>
          </view>
          <view class="tip-content">
            <view class="tip-title">{{ tip.title }}</view>
            <view class="tip-text">{{ tip.content }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 主添加弹窗 - 选择添加类型 -->
    <view class="modal-overlay" v-if="showActionModal" @click="closeAllModals">
      <view class="action-modal-container" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加记录</text>
          <text class="modal-close" @click="closeAllModals">×</text>
        </view>
        <view class="action-buttons">
          <view class="action-btn" @click="openMealModal">
            <text class="iconfont icon-caipin"></text>
            <text>添加饮食</text>
          </view>
          <view class="action-btn" @click="openWaterModal">
            <text class="iconfont icon-shui"></text>
            <text>添加饮水</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加饮食记录弹窗 -->
    <view class="modal-overlay" v-if="showMealModal" @click="closeAllModals">
      <view class="modal-container" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加饮食记录</text>
          <text class="modal-close" @click="closeAllModals">×</text>
        </view>
        <view class="modal-body">
          <view class="form-group">
            <text class="form-label">餐食名称</text>
            <input 
              type="text" 
              v-model="mealForm.name" 
              class="form-input" 
              placeholder="请输入餐食名称"
            />
          </view>
          <view class="form-group">
            <text class="form-label">餐次类型</text>
            <view class="meal-type-selector">
              <view 
                class="type-option" 
                :class="{ active: mealForm.type === 'breakfast' }"
                @click="mealForm.type = 'breakfast'"
              >
                <text class="iconfont icon-zaocan"></text>
                <text>早餐</text>
              </view>
              <view 
                class="type-option" 
                :class="{ active: mealForm.type === 'lunch' }"
                @click="mealForm.type = 'lunch'"
              >
                <text class="iconfont icon-wucan"></text>
                <text>午餐</text>
              </view>
              <view 
                class="type-option" 
                :class="{ active: mealForm.type === 'dinner' }"
                @click="mealForm.type = 'dinner'"
              >
                <text class="iconfont icon-wancan"></text>
                <text>晚餐</text>
              </view>
            </view>
          </view>
          <view class="form-group">
            <text class="form-label">热量(千卡)</text>
            <input 
              type="number" 
              v-model.number="mealForm.heat" 
              class="form-input" 
              placeholder="请输入热量值"
              min="0"
            />
          </view>
        </view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeAllModals">取消</button>
          <button class="confirm-btn" @click="submitMealForm">确认添加</button>
        </view>
      </view>
    </view>

    <!-- 添加饮水记录弹窗 -->
    <view class="modal-overlay" v-if="showWaterModal" @click="closeAllModals">
      <view class="modal-container" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加饮水记录</text>
          <text class="modal-close" @click="closeAllModals">×</text>
        </view>
        <view class="modal-body">
          <view class="form-group">
            <text class="form-label">饮水量(ml)</text>
            <input 
              type="number" 
              v-model.number="waterAmount" 
              class="form-input" 
              placeholder="请输入饮水量"
              min="1"
            />
          </view>
          <view class="water-suggestions">
            <view class="suggestion-label">常用量:</view>
            <view class="suggestion-values">
              <view class="suggestion-value" @click="waterAmount = 100">100ml</view>
              <view class="suggestion-value" @click="waterAmount = 200">200ml</view>
              <view class="suggestion-value" @click="waterAmount = 300">300ml</view>
              <view class="suggestion-value" @click="waterAmount = 500">500ml</view>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeAllModals">取消</button>
          <button class="confirm-btn" @click="submitWaterRecord">确认添加</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.health-container {
  min-height: 91vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40rpx 32rpx calc(20rpx + env(safe-area-inset-bottom)) 32rpx;
}

// 页面头部
.header-section {
  margin-bottom: 48rpx;

  .header-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 40rpx;
    padding: 48rpx 40rpx;
    box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .header-top {
      text-align: center;
      margin-bottom: 32rpx;

      .page-title {
        font-size: 48rpx;
        font-weight: 600;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
          font-size: 56rpx;
          color: #667eea;
          margin-right: 24rpx;
        }
      }
    }

    .header-stats {
      .user-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;

        .weight-info {
          color: #666;
          font-weight: 500;
        }

        .bmi-info {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .bmi-value {
            color: #666;
            font-weight: 500;
          }

          .bmi-status {
            padding: 4rpx 16rpx;
            border-radius: 16rpx;
            font-size: 24rpx;
            font-weight: 600;
          }
        }
      }
    }
  }
}

// 通用样式
.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin: 0;
  opacity: 0.8;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  padding: 0 32rpx;
}

.section-subheader {
  padding: 0 32rpx;
  margin: 36rpx 0 24rpx;
  
  .subheader-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #555;
    padding-left: 16rpx;
    border-left: 4rpx solid #667eea;
  }
}

.add-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 24rpx;
  padding: 16rpx 32rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
  }

  .iconfont {
    font-size: 28rpx;
  }
}

.empty-state {
  padding: 64rpx 32rpx;
  text-align: center;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 今日数据概览
.overview-section {
  margin-bottom: 48rpx;

  .data-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;
    padding: 0 16rpx;

    .data-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 32rpx;
      padding: 32rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      gap: 24rpx;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
      }

      .card-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .iconfont {
          font-size: 40rpx;
          color: white;
        }
      }

      .card-content {
        flex: 1;
        min-width: 0;

        .card-value {
          font-size: 36rpx;
          font-weight: 700;
          color: #333;
          line-height: 1;
          margin-bottom: 8rpx;
        }

        .card-label {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 16rpx;
        }

        .progress-bar {
          width: 100%;
          height: 8rpx;
          background: rgba(0, 0, 0, 0.1);
          border-radius: 4rpx;
          overflow: hidden;
          margin-bottom: 8rpx;

          .progress-fill {
            height: 100%;
            border-radius: 4rpx;
            transition: all 0.3s ease;
          }
        }

        .card-target {
          font-size: 20rpx;
          color: #999;
        }
      }

      &.water .card-icon {
        background: linear-gradient(45deg, #4ecdc4, #44a08d);
      }

      &.heat .card-icon {
        background: linear-gradient(45deg, #ff6b9d, #c44569);
      }
    }
  }
}

// 今日记录区域
.records-section {
  margin-bottom: 48rpx;

  // 饮食记录样式
  .meals-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    padding: 0 16rpx;

    .meal-item {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 32rpx;
      padding: 32rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      gap: 24rpx;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
      }

      .meal-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .meal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8rpx;

          .meal-type {
            display: flex;
            align-items: center;
            gap: 8rpx;
            font-size: 24rpx;
            font-weight: 600;
            color: #666;

            .iconfont {
              font-size: 28rpx;
            }
          }

          .meal-time {
            font-size: 24rpx;
            color: #999;
          }
        }

        .meal-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }

        .meal-heat {
          font-size: 28rpx;
          color: #667eea;
          font-weight: 500;
        }
      }

      .meal-actions {
        display: flex;
        align-items: center;

        .delete-btn {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: rgba(245, 108, 108, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #F56C6C;
          transition: all 0.2s ease;

          &:hover {
            background-color: rgba(245, 108, 108, 0.2);
          }

          .iconfont {
            font-size: 28rpx;
          }
        }
      }
    }
  }

  // 饮水记录样式
  .water-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    padding: 0 16rpx;

    .water-item {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 32rpx;
      padding: 32rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      gap: 24rpx;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
      }

      .water-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 24rpx;
        background: linear-gradient(45deg, #4ecdc4, #44a08d);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .iconfont {
          font-size: 40rpx;
          color: white;
        }
      }

      .water-info {
        flex: 1;

        .water-time {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 8rpx;
        }

        .water-amount {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
      }

      .water-actions {
        display: flex;
        align-items: center;

        .delete-btn {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: rgba(245, 108, 108, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #F56C6C;
          transition: all 0.2s ease;

          &:hover {
            background-color: rgba(245, 108, 108, 0.2);
          }

          .iconfont {
            font-size: 28rpx;
          }
        }
      }
    }
  }
}

// 健康建议
.tips-section {
  margin-bottom: 48rpx;

  .tips-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    padding: 0 16rpx;

    .tip-item {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 32rpx;
      padding: 32rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      gap: 24rpx;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
      }

      .tip-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .iconfont {
          font-size: 36rpx;
          color: white;
        }
      }

      .tip-content {
        flex: 1;

        .tip-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }

        .tip-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.4;
        }
      }
    }
  }
}

// 弹窗样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 40rpx;
}

.modal-container {
  width: 100%;
  max-width: 600rpx;
  background-color: white;
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
}

.action-modal-container {
  width: 100%;
  max-width: 500rpx;
  background-color: white;
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 32rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .modal-close {
    font-size: 36rpx;
    color: #999;
    cursor: pointer;
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;

    &:hover {
      background-color: #f5f5f5;
      color: #666;
    }
  }
}

.modal-body {
  padding: 36rpx;
}

.modal-footer {
  padding: 24rpx 36rpx;
  border-top: 1px solid #eee;
  display: flex;
  gap: 24rpx;
}

// 主添加弹窗按钮
.action-buttons {
  display: flex;
  flex-direction: column;
  padding: 32rpx;

  .action-btn {
    padding: 36rpx 24rpx;
    margin-bottom: 24rpx;
    border-radius: 24rpx;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    font-size: 32rpx;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      background-color: #eef0f5;
      transform: translateY(-2rpx);
    }

    .iconfont {
      font-size: 40rpx;
      color: #667eea;
    }
  }
}

// 表单样式 - 优化输入框和文字重叠问题
.form-group {
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;

  .form-label {
    display: block;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    line-height: 1.2;
  }

  .form-input {
    width: 100%;
    padding: 28rpx 24rpx;
    border: 1px solid #ddd;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
    min-height: 90rpx;
    line-height: 1.5;
    letter-spacing: 0.5px;

    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }
  }

  .meal-type-selector {
    display: flex;
    gap: 24rpx;

    .type-option {
      flex: 1;
      padding: 24rpx 16rpx;
      border: 1px solid #ddd;
      border-radius: 16rpx;
      text-align: center;
      font-size: 28rpx;
      color: #666;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      cursor: pointer;
      transition: all 0.2s ease;

      .iconfont {
        font-size: 36rpx;
      }

      &.active {
        border-color: #667eea;
        background-color: rgba(102, 126, 234, 0.1);
        color: #667eea;
      }

      &:hover {
        border-color: #667eea;
      }
    }
  }
}

// 饮水建议选项
.water-suggestions {
  margin-top: 20rpx;
  padding-top: 10rpx;
  
  .suggestion-label {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 16rpx;
  }
  
  .suggestion-values {
    display: flex;
    gap: 16rpx;
    flex-wrap: wrap;
    
    .suggestion-value {
      padding: 14rpx 24rpx;
      background-color: #f5f7fa;
      border-radius: 16rpx;
      font-size: 24rpx;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: #eef0f5;
        color: #667eea;
      }
    }
  }
}

// 弹窗按钮
.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 24rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;

  &:hover {
    background-color: #eee;
  }
}

.confirm-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;

  &:hover {
    opacity: 0.9;
  }
}

// 条件编译适配
/* #ifdef MP-WEIXIN */
.health-container {
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}
/* #endif */

// 平板适配
@media (min-width: 768px) {
  .health-container {
    max-width: 1600rpx;
    margin: 0 auto;
    padding-bottom: 80rpx;
  }

  .overview-section .data-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>
